<template>
  <div id="aduit">
    <div class="container">
      <div class="common-detail">
        <div class="info-title">基本信息</div>
        <div class="info-box">
          <info-table :data="infoTable" />
        </div>
        <div class="info-title">任务反馈</div>
        <DataTable
          rowKey="ncMaterielId"
          :showConfig="false"
          :btns="(alias === 'edit' && btns) || []"
          :tableData="Data"
          :expand="true"
          :tableColumn="tableColumn"
          :rowSelection="{ selectedRowKeys: deleteList, onChange: chooseBack }"
          :pageConfig="pageConfig"
        >
          <template slot="expand" slot-scope="{ index, data }">
            <div class="expand-box">
              <Upload :defaultList="data.countingTaskGoodsFiles" :disabled="alias === 'detail'" @change="handleUpload" @remove='handleRemove' @click.native="clickUpload(index)" :limit="6" />
            </div>
          </template>
        </DataTable>
        <!-- 已完成、已驳回状态显示 -->
        <template v-if="checkData.length!==0">
          <div style="margin-top: 24px"  v-for="(item,index) in checkData" :key="index">
            <div class="info-title">审核信息</div>
            <div class="info-body">
              <a-row class="body-row">
                <a-col :span="3" class="row-left">审核人</a-col>
                <a-col :span="6" class="row-right">{{item.adminUser}}</a-col>
                <a-col :span="3" class="row-left">审核时间</a-col>
                <a-col :span="6" class="row-right">{{item.createTime}}</a-col>
              </a-row>
              <a-row class="body-row">
                <a-col :span="3" class="row-left">审核意见</a-col>
                <a-col :span="6" class="row-right">{{item.auditResult==='Y'?'通过':'不通过'}}</a-col>
                <a-col :span="3" class="row-left">审核说明</a-col>
                <a-col :span="6" class="row-right">{{item.remark}}</a-col>
              </a-row>
            </div>
          </div>
        </template>

        <!-- 待审核状态 -->
        <div style="margin-top: 24px" v-if="['DSH'].includes(detailData.detailState) && viewType === 'check'">
           <div class="info-title">审核处理</div>
          <Audit :form="checkForm" @confirm="handleConfirm" />
        </div>
        <div class="footer-btns" v-if="['DWC', 'DTJ', 'BH'].includes(detailData.detailState) && alias === 'edit'">
          <a-button type="primary" @click="handleSave" style="margin-right: 12px">保存</a-button>
          <a-button type="primary" @click="handleSubmit" v-if="isSubmit">提交</a-button>
        </div>
      </div>
    </div>
    <!-- 选择物资弹窗 -->
    <a-modal
      title="选择物资"
      width="1000px"
      :visible="formVisible"
      @ok="handleChoose"
      @cancel="handleCancel"
    >
      <a-row>
        <a-col :span="5" >
          <div class="left-tree">
            <a-input-search style="margin-bottom: 8px" v-model="searchValue" placeholder="请输入分类名称" @change="onChange" />
            <a-tree
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :tree-data="treeData"
              :selectedKeys="selectedKeys"
              :replaceFields="replaceFields"
              @expand="onExpand"
              @select="selectTree"
            >
              <template slot='title' slot-scope={name}>
                <span v-html="name.replace(new RegExp(searchValue,'g'),'<span style=color:#f50>' + searchValue + '</span>')"></span>
              </template>
            </a-tree>
        </div>

        </a-col>
        <a-col :span="19">
          <div class="right-table">
          <Filters
            class="filters"
            :form="searchForm"
            :filterData="filterData"
            @confirm="changeMaterialPage(1)"
          />
          <DataTable
            class="dialog-table"
            rowKey="ncMaterielId"
            :tableData="materialData"
            :tableColumn="materialTableColumn"
            :pageConfig="materialPageConfig"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @refresh="getNcMaterialList"
          />
        </div>
        </a-col>
      </a-row>
    </a-modal>
    <!-- 表格导入 -->
    <a-modal
      title="导入物资"
      width="800px"
      :visible="showVisible"
      @ok="submit"
      @cancel="cancel"
    >
      <div>
        <a-upload
          name="file"
          :action="uploadURL"
          :data='{taskDetailId}'
          :showUploadList='false'
          :headers="$header()"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          ref="uploadForm"
          :beforeUpload="beforeUpload"
          @change="handleChange"
        >
          <a-button type="primary">
            选择文件导入
          </a-button>
        </a-upload>
        <a-button type="primary" @click="downHandle" class="btns">
          下载模板
        </a-button>
      </div>
      <div v-if="this.message">
        <div class="upload-text">请处理一下数据再进行导入</div>
        <div class="upload-message" >{{this.message}}</div>
      </div>
      <DataTable
        rowKey="goodsId"
        :showConfig="false"
        :tableData="uploadData"
        :tableColumn="uploadTableColumn"
        :pageConfig="pageConfig"
      />
    </a-modal>
  </div>
</template>
<script lang='ts'>
import { Validate, Confirm } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import {COUNTING_DOWNLOAD, COUNTING_IMPORT} from '@/api/global'
import util from '@/util/util'
const getParentKey = (key: any, tree: any): any => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item: any) => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
const dataList: any[] = []
const generateList = (data: any) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({ key, title: key });
    if (node.children) {
      generateList(node.children);
    }
  }
};

@Component
export default class aduit extends Vue {
  checkForm: any = {}
  infoTable: any[] = [];
  searchForm: any = {
    searchValue: ''
  };
  get filterData () {
    return {
      searchValue: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    }
  }
  id: string = '';
  Data: any[] = [];
  tableColumn: any = {
    ncMaterielId: {
      label: '材料编码'
    },
    ncMaterielName: {
      label: '材料名称'
    },
    // goodsCode: {
    //   label: '材料编码',
    //   width: 120
    // },
    // ncMaterielName: {
    //   label: '材料名称',
    //   width: 200
    // },
    // before_num: {
    //   label: '规格',
    //   width: 120
    // },
    goodsUnit: {
      label: '单位'
    },
    unitPrice: {
      label: '单价',
      type: 'input',
      disabled: this.alias !== 'edit'
    },
    stockNum: {
      label: '库存量',
      type: 'inputNumber',
      disabled: this.alias !== 'edit',
      cat: 'price',
      pre: ''
    },
    goodsSum: {
      label: '闲置可周转数量',
      type: 'inputNumber',
      disabled: this.alias !== 'edit',
      cat: 'price',
      pre: ''
    },
    action: {
      label: '操作',
      width: 230,
      template: [
        {
          tag: 'a',
          text: '删除',
          callback: this.delHandle,
          show: this.alias !== 'detail'
        }
      ]
    }
  }
  uploadTableColumn: any = {
    goodsCode: {
      label: '材料编码'
    },
    ncMaterielName: {
      label: '材料名称'
    },
    goodsUnit: {
      label: '单位'
    },
    unitPrice: {
      label: '单价'
    },
    stockNum: {
      label: '库存量',
      type: 'inputNumber',
      disabled: this.alias !== 'edit',
      cat: 'price',
      pre: ''
    },
    goodsSum: {
      label: '闲置可周转数量',
      type: 'inputNumber',
      disabled: this.alias !== 'edit',
      cat: 'price',
      pre: ''
    }
  }
  pageConfig: any = {
    current: 1,
    total: 0,
    pageSize: 10,
    onChange: this.changePage
  };
  get btns () {
    return [
    {
      label: '选择物资',
      callback: this.chooseMaterial
    },
    {
      label: '删除',
      callback: () => this.delHandle(null, this.deleteList)
    },
    {
      label: '表格导入',
      callback: () => this.exportHandle()
    }
  ];
  }
  selectedRowKeys: any[] = [];
  options: any[] = [];
  formVisible: boolean = false; // 选择物资
  showVisible: boolean = false; // 导入物资
  skuOptions: any[] = []; // 规格
  checkData: any = [] // 审核信息
  expandedKeys: any[] = []
  searchValue: string = ''
  autoExpandParent: boolean = true
  treeData: any[] = []
  selectedKeys: any[] = []
  checkedKeys: any[] = []
  backupsExpandedKeys: any[] = []
  replaceFields: any = {
    children: 'child',
    title: 'name',
    key: 'id'
  }
  departId: any = ''
  materialData: any = [] // 物资列表
  uploadData: any = [] // 上传物资列表
  materialTableColumn: any = {
    ncMaterielId: {
      label: '物资编码'
    },
    ncMaterielName: {
      label: '物资名称'
    },
    materialspec: {
      label: '规格'
    },
    materialtype: {
      label: '型号'
    },
    measdocName: {
      label: '单位'
    }
    // change_price: {
    //   label: '采购价',
    //   width: 120
    // }
  };
  materialPageConfig: any = {
    current: 1,
    total: 0,
    pageSize: 10,
    onChange: this.changeMaterialPage
  };
  selectData: any = [] // 选择的物资
  detailData: any = [] // 详情数据
  uploadIndex: number = 0
  isSubmit: boolean = false // 是否保存完
  stateMap: any = {
    'BH': '驳回',
    'YWC': '同意'
  }
  deleteList: any = [] // 删除数组
  ncMaterielId: string[] = []
  treeId: string = ''
  materialList: any[] = []
  uploadURL: string = ''
  message: string = ''
  get alias () {
    return this.$route.query._alias;
  }
  get taskDetailId () {
    return this.$route.query.taskDetailId
  }
  get viewType () {
    return this.$route.query.type
  }

  init () {
    this.uploadURL = util.getApiUrl() + COUNTING_IMPORT
    this.id = this.$route.query.id as string;
    generateList(JSON.parse(JSON.stringify(this.treeData)))
    this.getDetail()
    this.getTaskAudit()
    this.getTreeData()
    // this.getList()
    // this.getMaterialList()
  }
  // 获取树形结构
  getTreeData () {
    let data = { code: this.treeValue }
    this.$api.goodsNcMaterielTypeListFetch(data).then((res: any) => {
      this.treeData = res.data.map((item:any) => ({
        id: item.id,
        name: item.codeName,
        code: item.code,
        scopedSlots: {title: 'title'},
        child: item.child && item.child.map((item2:any) => ({
          id: item2.id,
          name: item2.codeName,
          code: item2.code,
          scopedSlots: {title: 'title'},
          child: item2.child && item2.child.map((item3:any) => ({
            id: item3.id,
            name: item3.codeName,
            code: item3.code,
            scopedSlots: {title: 'title'},
            child: item3.child && item3.child.map((item4:any) => ({
              id: item4.id,
              name: item4.codeName,
              code: item4.code,
              scopedSlots: {title: 'title'}
            }))
          }))
        }))
      })
      )
    })
  }
  onExpand (expandedKeys: any[]) {
    this.expandedKeys = expandedKeys;
    this.autoExpandParent = false;
  }
  // 选择树
  selectTree (selectedKeys: any) {
    console.log('选择树', selectedKeys)
    this.treeId = selectedKeys[0]
    this.getNcMaterialList()
  }
  onChange (e: any) {
    console.log(e.target.value);
    const value = e.target.value;
    // this.searchValue = value
    if (value === '') {
          this.expandedKeys = [];
        } else {
          // 首先将展开项与展开项副本置为空
          this.expandedKeys = [];
          this.backupsExpandedKeys = [];
          // 获取所有存在searchValue的节点
          let candidateKeysList = this.getkeyList(value, this.treeData, []);
          console.log(candidateKeysList, 'candidateKeysList');

          // 遍历满足条件的所有节点
          candidateKeysList.map(
            (item:any) => {
              // 获取每个节点的母亲节点
              var key = this.getParentKey(item, this.treeData);
              console.log(key, 'key');

              // 当item是最高一级，父key为undefined，将不放入到数组中
              // 如果母亲已存在于数组中，也不放入到数组中
              if (key && !this.backupsExpandedKeys.some(item => item === key)) { this.backupsExpandedKeys.push(key); }
            }
          )
          let length = this.backupsExpandedKeys.length;
          for (let i = 0; i < length; i++) {
            this.getAllParentKey(this.backupsExpandedKeys[i], this.treeData)
          }
          console.log(
            this.backupsExpandedKeys, 222
          );
          this.expandedKeys = this.backupsExpandedKeys.slice();
        }
    // this.treeValue = value
    // this.getTreeData()
  }
  // 获取节点中含有value的所有key集合
  getkeyList (value:any, tree:any, keyList:any) {
    // 遍历所有同一级的树
    for (let i = 0; i < tree.length; i++) {
      let node = tree[i];
      if (node.name.indexOf(value) > -1) {
        keyList.push(node.id);
      }
      if (node.child) {
          this.getkeyList(value, node.child, keyList);
      }
    }
    return keyList;
  }
  // 该递归主要用于获取key的父亲节点的key值
  getParentKey (key:any, tree:any) {
    let parentKey :any
    let temp :any;
    // 遍历同级节点
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.child) {
        if (node.child.some((item:any) => item.id === key)) {
          parentKey = node.id;
        } else if (temp = this.getParentKey(key, node.child)) {
          // parentKey = this.getParentKey(key,node.children)
          // 改进，避免二次遍历
          parentKey = temp;
        }
      }
    }
    return parentKey;
  }
  // 获取该节点的所有祖先节点
  getAllParentKey (key:any, tree:any) {
    var parentKey = '';
    if (key) {
      // 获得父亲节点
      parentKey = this.getParentKey(key, tree);
      if (parentKey) {
      	// 如果父亲节点存在，判断是否已经存在于展开列表里，不存在就进行push
        if (!this.backupsExpandedKeys.some(item => item === parentKey)) {
          this.backupsExpandedKeys.push(parentKey);
        }
        // 继续向上查找祖先节点
        this.getAllParentKey(parentKey, tree)
      }
    }
  }
  // 获取审核信息
  getTaskAudit () {
    this.$api.countingTaskAuditFetch({taskDetailId: this.taskDetailId}).then((res:any) => {
      this.checkData = res.data
    })
  }
  getDetail () {
    let data = { taskDetailId: this.taskDetailId }
    this.$api.countingTaskMonitorDetailFetch(data).then((res: any) => {
      const that = res.data
      let { detailState } = res.data
      that.sh_yj = this.stateMap[detailState] || ''
      let { taskInfo, checkInfo } = this.$enums.allot
      this.infoTable = Object.keys(taskInfo).map((key: any) => ({label: taskInfo[key], value: (this.$enums.allot[key] || {})[res.data[key]] || res.data[key]}))
      // this.checkData = Object.keys(checkInfo).map((key: any) => ({label: checkInfo[key], value: (this.$enums.allot[key] || {})[res.data[key]] || res.data[key]}))
      let goodsList = res.data.countingTaskGoodsBeans.map((item: any) => ({
        ncMaterielId: item.goodsCode,
        ncMaterielName: item.ncMaterielName,
        goodsCode: item.ncMaterielId,
        goodsModel: item.goodsModel,
        goodsSum: item.goodsSum,
        goodsSpec: item.goodsSpec,
        goodsUnit: item.goodsUnit,
        stockNum: item.stockNum,
        unitPrice: item.unitPrice,
        surplusNum: item.surplusNum,
        countingTaskGoodsFiles: item.countingTaskGoodsFiles.map((ele: any, index: number) => ({
          uid: -index - 1,
          url: ele.url,
          name: ele.url
        }))
      }))
      this.Data = goodsList
      // if (this.showVisible === true) {
      //   this.uploadData = goodsList
      // }
      this.detailData = res.data
    })
  }
  getList () {
    const { current: page, pageSize: size } = this.pageConfig;
    const data = {
      page,
      size,
      id: this.id
    };
    this.$api.resourceManagementPurchaseChangeListFetch(data).then((res: any) => {
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  changeMaterialPage (val: number) {
    this.materialPageConfig.current = val;
    this.getNcMaterialList();
  }
  // 点击上传照片
  clickUpload (index: number) {
    this.uploadIndex = index
  }
  // 上传图片
  handleUpload (fileList: any) {
    this.$set(this.Data[this.uploadIndex], 'countingTaskGoodsFiles', fileList)
  }
  // 移除图片
  handleRemove (file:any) {
    this.Data.forEach((element:any, index:any) => {
       element.countingTaskGoodsFiles = element.countingTaskGoodsFiles.filter((item:any) => {
        return item.url !== file.url;
      })
    });
  }
  // 点击选择物资
  chooseMaterial () {
    this.formVisible = true;
    this.materialData = []
    this.ncMaterielId = []
    this.materialPageConfig.current = 1
    this.materialPageConfig.total = 0
    this.getMaterialCategoryList()
  }
  // 确认审核
  handleConfirm () {
    let { auditStatus, remark } = this.checkForm
    let data = {
      taskDetailId: this.taskDetailId,
      sh_explain: remark,
      detailState: auditStatus === 1 ? 'YWC' : auditStatus === 2 ? 'BH' : ''
    }
    this.$api.countingDownFetch(data).then(() => {
      this.$message.success('审核成功')
      this.$router.back()
    })
  }
  // 任务反馈复选
  chooseBack (selectedRowKeys: string[], row: any) {
    this.deleteList = selectedRowKeys
  }
  // 复选物资
  onSelectChange (selectedRowKeys: string[], row: any) {
    this.selectedRowKeys = selectedRowKeys
    this.selectData = row
  }
  // 选择物资确定
  handleChoose () {
    // this.selectData.forEach((ele: any, index: number) => {
    //   this.$set(this.selectData[index], 'countingTaskGoodsFiles', [])
    //   this.$set(this.selectData[index], 'goodsSum', 0)
    // })
    // this.selectData.map()
    this.selectData.map((item:any) => {
      item.goodsUnit = item.measdocName
    })
    console.log('this.selectData', this.selectData);

    this.Data = this.Data.concat(this.selectData)
    console.log('this.Data', this.Data);

    // let setMap = new Map()
    // this.Data.map((item: any) => setMap.set(item.goodsCode, item))
    // this.Data = [...setMap.values()]
    this.handleCancel()
  }
  handleCancel () {
    this.formVisible = false
    this.selectData = []
    this.selectedRowKeys = []
  }
  // 删除
  @Confirm('', (row?: any, deleteList?: string[]) => {
    return new Promise((resolve, reject) => {
      if (row) {
        // eslint-disable-next-line prefer-promise-reject-errors
        reject({message: 'noConfirm'})
      } else {
        console.log(deleteList!.length);
        // eslint-disable-next-line prefer-promise-reject-errors
        deleteList!.length ? resolve({content: '你确定要删除所选的材料吗？'}) : reject({message: '请勾选要删除的材料'})
      }
    })
  })
  delHandle (row?: any, deleteList?: string[]) {
    const key = 'ncMaterielId'
    console.log('删除', row)
    console.log('删除', this.Data)
    if (row) {
      this.Data.splice(this.Data.findIndex(item => item[key] === row[key]), 1)
    } else {
      // 删除多个
      this.deleteList.map((key: any) => this.Data.splice(this.Data.findIndex(item => item[key] === key), 1))
      this.deleteList = []
    }
  }

  // 保存
  handleSave () {
    let submitData = JSON.parse(JSON.stringify(this.Data))
    submitData.forEach((ele: any) => {
      if (ele.countingTaskGoodsFiles) {
        ele.countingTaskGoodsFiles = ele.countingTaskGoodsFiles.map((item: any) => ({
        url: this.$util.getPicUrl(item)
      }))
      }
    })
    console.log('submitData', submitData);

    submitData = submitData.map((item:any) => ({
      goodsCode: item.ncMaterielId,
      ncMaterielId: item.goodsCode,
      ncMaterielName: item.ncMaterielName,
      stockNum: item.stockNum,
      goodsSum: item.goodsSum,
      unitPrice: item.unitPrice,
      goodsUnit: item.goodsUnit,
      countingTaskGoodsFiles: item.countingTaskGoodsFiles && item.countingTaskGoodsFiles.map((item2: any) => ({
        url: this.$util.getPicUrl(item2)
      }))
    }))
    let data = {
      countingTaskGoodsBeans: submitData,
      taskDetailId: this.taskDetailId
    }
    this.$api.countingSaveTaskGoodsFetch(data).then(() => {
      this.$message.success('保存成功')
      this.isSubmit = true
    })
  }
  // 提交
  handleSubmit () {
    if (this.Data.length === 0) return this.$message.error('请先添加物资！')
    let data = {
      taskDetailId: this.taskDetailId
    }
    this.$api.countingTaskMonitorDetailDowFetch(data).then(() => {
      this.$message.success('提交成功')
      this.$router.go(-1)
    })
  }
  // 获取物料数据
  getMaterialCategoryList () {
    this.$api.goodsNcMaterielTypeListFetch().then((res: any) => {
      this.materialList = res.data
    })
  }
  getNcMaterialList () {
    let { current, pageSize } = this.materialPageConfig
    let data = {
      page: current,
      size: pageSize,
      id: this.treeId,
      searchValue: this.searchForm.searchValue
    }
    this.$api.wuLiaoWuLiaoListFetch(data).then((res: any) => {
      this.materialData = res.data.records.map((item:any) => ({
        ncMaterielId: item.ncMaterielCode,
        ncMaterielName: item.ncMaterielName,
        goodsCode: item.ncMaterielId,
        materialspec: item.materialspec,
        materialtype: item.materialtype,
        measdocName: item.measdocName
      }))
      console.log(this.materialData, 123);

      this.materialPageConfig.total = res.data.total
      if (!this.materialData.length && this.materialPageConfig.current > 1) {
        --this.materialPageConfig.current
        this.getNcMaterialList()
      }
    })
    // if (this.ncMaterielId.length < 3) return;
    // this.$api.goodsNcMaterielListPageFetch({
    //   id: this.ncMaterielId[this.ncMaterielId.length - 1],
    //   page: this.materialPageConfig.current,
    //   size: this.materialPageConfig.pageSize
    // }).then((res: any) => {
    //   this.materialData = res.data.records.map((item: any) => ({ ncMaterielName: item.wuliaoName, goodsCode: item.wuliaoCode }))
    //   this.materialPageConfig.total = res.data.total;
    // })
  }
  exportHandle () {
    this.showVisible = true
  }
  submit () {
    this.cancel()
  }
  cancel () {
    this.showVisible = false
    this.message = ''
    this.uploadData = []
    this.getDetail()
  }
  downHandle () {
    let url = COUNTING_DOWNLOAD
    let apiUrl = util.getApiUrl() + url
    window.open(apiUrl)
  }
  beforeUpload () {
    return util.beforeUpload(this.$refs['uploadForm']);
  }
  handleChange (res: any) {
    console.log(res);

    if (res && res.file && res.file.response && res.file.response.msg) {
        this.message = res.file.response.data.msg
        this.uploadData = res.file.response.data.equipmentList
      }
  }
}
</script>
<style lang='scss' scoped>
#aduit {
  .financing {
    width: 33%;
    border-right: 1px solid #c9c9c9;
  }
  .loan {
    width: 35%;
    padding-left: 2%;
  }
  .common-detail {
    /deep/.ant-input-number {
      width: 100%;
    }
    .info-box {
      margin-bottom: 24px;
    }
    .time-line {
      margin-top: 20px;
    }
    .form-model {
      margin-top: 20px;
    }
    .audit {
      .input-box {
        width: 300px;
        margin-right: 20px;
      }
      .flex {
        margin-top: 10px;
      }
    }
    .expand-box {
      .expand-title {
        font-weight: 600;
        padding: 10px;
        background-color: #e9e9e9;
      }
      /deep/.table-header {
        margin-bottom: 0;
      }
    }
  }
  .footer-btns{
    display: flex;
    align-items: center;
    margin-top: 24px;
    justify-content: center;
  }
}
// 弹窗
.transfer-box {
  width: 100%;
  border: 1px solid red;
  .box-title {
    color: #000;
    font-weight: 800;
    // margin-bottom: 12px;
  }
  .info-box {
    display: flex;
    flex-direction: column;
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.btns{
  margin-left: 15px;
}
.info-body{
  .body-row{
    .row-left{
      border: 1px solid #eeeeee;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #f9fafc;
    }
    .row-right{
      border: 1px solid #eeeeee;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }
}
.upload-text{
  margin: 20px 0 10px 0;
}
.upload-message{
  margin: 0 0 10px 20px;
  color: red;
}
.left-tree{
  border: 1px solid #999;
  padding: 10px;
  height: 400px;
  width: 100%;
  overflow: auto;
}
.left-tree::-webkit-scrollbar{
  display: none;
}
.right-table{
  position: relative;
  .filters{
    position: absolute;
    top: -40px;
    left: 10px;
  }
}
.dialog-table{
  margin-top: 20px;
}

</style>
